<template>
  <div class="login">
    <div class="hi">
      <div class="hi_1">您好，</div>
      <div class="hi_2">欢迎来到温州非遗go</div>
    </div>
    <div class="form_set">
      <van-form @submit="onSubmit">
        <div class="label">用户名</div>
        <van-field v-model="form.username" name="username" label="" placeholder="请输入用户名" :rules="[{ required: true }]" />
        <div class="label">密码</div>
        <van-field v-model="form.password" name="password" label="" :type="passwordType" placeholder="请输入密码"
          :rules="[{ required: true }]">
          <template slot="right-icon">
            <img :src="passwordType == 'password' ? look : close_look" class="look"
              :class="passwordType == 'password' ? 'set_look' : 'set_close_look'" alt="" @click="switchPasswordType">
          </template>
        </van-field>
        <div class="login_btn">
          <!-- <div class="weixin" @click="getCode()">
            <van-button round block type="info">微信一键登录</van-button>
          </div> -->

          <van-button round block type="info" native-type="submit">账号登陆</van-button>

          <!-- <div class="zc" @click="onSignIn">注册</div> -->
        </div>
      </van-form>
      <div class="wx">
        <van-button round block type="info" @click="getCode">微信登陆</van-button>
      </div>
      <div class="zc" @click="onSignIn">注册</div>
    </div>

  </div>
</template>

<script>
import { postlogin, getUser } from "@/api/api.js";
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  name: '',
  data() {
    return {
      code: '',
      form: {
        username: '',
        password: '',
      },

      passwordType: 'password',
      look: require("../../assets/images/look.png"),
      close_look: require("../../assets/images/close_look.png"),
    };
  },
  created() {
    // this.getCode()
  },
  mounted() {

  },
  methods: {
    getCode() {
      
      let code = this.getUrlCode().code; //拿到截取的code
      let redirect_uri = encodeURI('https://jsc.wzfeiyi.cn/fygo')
      let appid = "wx77dec9047c8c94d9";
      let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
      // window.location.href = wx_url;
      if (code == null || code === "") {
        window.location.href = wx_url
      } else {
        this.getOpenid(code) //此方法是将拿到得code传入获取openid得方法内
      }
      // http://192.168.2.186:8080/#/home

      // {"msg":"操作成功","code":200,"data":{"country":"","yhid":29,"province":"","city":"","openid":"oV-_e0pwtD5aFkjrc-7lJr2gxo14","sex":0,"nickname":"龍","headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoLRLdGyNP7TmRn9RBF63unK8aCKOCic65fkJZNArAiazdAQ2DicgDfSKd2xKg1rKiaGGfBvkZKftj0Xw/132"}}
    },
    getUrlCode() {
      var url = location.search;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },
    async getOpenid(code) {
      console.log('code===', code);
      let res = await getUser({
        code: code
      })
      console.log('微信授权登录返回==', res);
      if (res.data.code == 200) {
        localStorage.setItem('userlogin', JSON.stringify(res.data.data))
        this.$router.push({ path: "/home" });
      }
    },
    async onSubmit(values) {
      let res = await postlogin({
        yhm: this.form.username,
        pwd: this.$md5(this.form.password),
      });
      console.log('res==', res);
      if (res.data.code == 200) {
        localStorage.setItem('userlogin', JSON.stringify(res.data.data))
        Toast('登录成功！');
        this.$router.push({ path: "/home", query: {} });
      } else {
        Toast(res.data.msg);
      }
    },
    onSignIn() {
      this.$router.push({ path: '/signIn', query: { id: '1' } })
    },
    switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    }
  },
}
</script>
<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;

  .hi {
    margin-left: 1.625rem;
    padding-top: 7rem;

    .hi_1 {
      font-size: 1.5rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 2.0625rem;
    }

    .hi_2 {
      font-size: 1.25rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3D3D3D;
      line-height: 1.125rem;
      padding-top: .625rem;
    }
  }

  .form_set {
    width: 100%;
    height: 24.0625rem;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0px 0px;
    margin-top: 1.6875rem;

    .van-form {
      padding: 0 .9375rem;
      padding-top: 1rem;

      .label {
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 1.5rem;
        padding-top: .625rem;
        padding-left: 15px;
      }

      ::v-deep .van-button--info {
        background: #6CAAFE;
        border: #6CAAFE;
        box-shadow: 0px .125rem .25rem 0px rgba(108, 170, 254, 0.3);
      }

      ::v-deep .van-button__text {
        font-size: .875rem;
      }

      .look {
        width: 1.1375rem;
        height: .7875rem;
      }

      .set_close_look {
        width: 1.5313rem;
      }

      .login_btn {
        margin: 0 16px;
        margin-top: 4.6875rem;

        .weixin {
          // width: 19.5rem;
          // height: 2.8rem;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          // background-color: #6CAAFE;
          // font-size: .875rem;
          // color: #fff;
          // margin: 0 auto;
          // border-radius: 1.5rem;
          margin-bottom: 1.5rem;
        }


      }
    }
  }

  .zc {
    font-size: .875rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6CAAFE;
    line-height: 1.375rem;
    text-align: center;
    padding-top: 1.4375rem;
  }
  .wx {
    padding: 31px;
  }
}
</style>